@import "tailwindcss";

/* Iconify 插件 - 动态选择器模式（零配置） */
@plugin "@iconify/tailwind4";

/* 全局样式重置 */
@layer base {
  * {
    @apply border-gray-200;
  }
  
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 font-sans antialiased;
    margin: 0;
    min-height: 100vh;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  #app {
    @apply min-h-screen;
  }
  
  /* 滚动条样式 */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

/* 自定义动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

.animate-slideInRight {
  animation: slideInRight 0.5s ease-out;
}

/* 工具类 */
@layer utilities {
  /* 文本省略 */
  .text-ellipsis {
    @apply truncate;
  }
  
  .text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .text-ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 隐藏滚动条 */
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
  /* 动画延迟 */
  .animate-delay-100 {
    animation-delay: 100ms;
  }
  
  .animate-delay-200 {
    animation-delay: 200ms;
  }
  
  .animate-delay-300 {
    animation-delay: 300ms;
  }
  
  /* 导航链接样式 */
  .nav-link {
    @apply flex items-center px-3 py-2 text-sm font-medium rounded-[0.6rem] transition-all duration-200 active:scale-[0.985];
    background-color: #F5F5F0;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .nav-link-active {
    @apply bg-blue-50 text-blue-700 border-l-4 border-blue-500;
  }
  
  .nav-link-inactive {
    @apply text-gray-700 hover:bg-gray-100 hover:text-gray-900;
  }
  
  /* 卡片样式 */
  .card {
    @apply p-6 border border-gray-200 rounded-[0.6rem] transition-all duration-200;
    background-color: #FAF9F5;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .card-hover {
    @apply hover:border-gray-300 hover:shadow-lg;
  }
  
  .border-primary {
    @apply border-blue-500;
  }
  
  /* 状态标签样式 */
  .status-tag {
    @apply inline-flex items-center font-medium rounded-[0.6rem] transition-all duration-200;
  }
  
  .status-success {
    @apply bg-green-100 text-green-800;
  }
  
  .status-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .status-error {
    @apply bg-red-100 text-red-800;
  }
  
  .status-info {
    @apply bg-blue-100 text-blue-800;
  }
  
  .status-gray {
    @apply bg-gray-100 text-gray-800;
  }
}

/* 自定义动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

.animate-slideInRight {
  animation: slideInRight 0.5s ease-out;
}
